  <template lc_id="na2zPOL4fY">
      <div lc_id="7QLt3BTntD">
          <div lc_id="MoDIFD9beY">
              <div class="demonstration-element" lc_id="P3YgnZ+f9L">Layout 布局</div>
              <el-row lc-mark lc_id="NezszKss/U">
                  <el-col :span="24" lc_id="TW/BDkcZrB">
                      <div class="grid-content bg-purple-dark" lc_id="1Lsg2uMePE"></div>
                  </el-col>
              </el-row>
              <el-row lc-mark lc_id="TPZKAPgQp1">
                  <el-col :span="12" lc_id="iNHSLalTdq">
                      <div class="grid-content bg-purple" lc_id="euyIZziPqv"></div>
                  </el-col>
                  <el-col :span="12" lc_id="OVZhfCLYXt">
                      <div class="grid-content bg-purple-light" lc_id="c7AXrVMer2"></div>
                  </el-col>
              </el-row>
              <el-row lc-mark lc_id="tzvFqToSIx">
                  <el-col :span="8" lc_id="gqZj2TfLb8">
                      <div class="grid-content bg-purple" lc_id="hU+oUAIchh"></div>
                  </el-col>
                  <el-col :span="8" lc_id="Ce0iiKHF1D">
                      <div class="grid-content bg-purple-light" lc_id="dYm8Ds+7GU"></div>
                  </el-col>
                  <el-col :span="8" lc_id="jJwg57nJyc">
                      <div class="grid-content bg-purple" lc_id="WgFRKki5iV"></div>
                  </el-col>
              </el-row>
              <el-row lc-mark lc_id="DISqSQIRuT">
                  <el-col :span="6" lc_id="YzZ2AwSW6G">
                      <div class="grid-content bg-purple" lc_id="u5xd9+dh9V"></div>
                  </el-col>
                  <el-col :span="6" lc_id="LEPFDf8YYH">
                      <div class="grid-content bg-purple-light" lc_id="D05FS4uRjs"></div>
                  </el-col>
                  <el-col :span="6" lc_id="BBCqvPJv/X">
                      <div class="grid-content bg-purple" lc_id="S42KNtBQFZ"></div>
                  </el-col>
                  <el-col :span="6" lc_id="DHblSwi+L7">
                      <div class="grid-content bg-purple-light" lc_id="ivjjPVjjnr"></div>
                  </el-col>
              </el-row>
              <el-row lc-mark lc_id="9mPg3N+4Qw">
                  <el-col :span="4" lc_id="T8HazUYEOt">
                      <div class="grid-content bg-purple" lc_id="meZQqlUbyc"></div>
                  </el-col>
                  <el-col :span="4" lc_id="us0lyJqF9u">
                      <div class="grid-content bg-purple-light" lc_id="Dg7zC5FRWM"></div>
                  </el-col>
                  <el-col :span="4" lc_id="Jg2zamD3Pm">
                      <div class="grid-content bg-purple" lc_id="pTHu7SCFdf"></div>
                  </el-col>
                  <el-col :span="4" lc_id="uFfJtyu3lO">
                      <div class="grid-content bg-purple-light" lc_id="4Y1h471JWS"></div>
                  </el-col>
                  <el-col :span="4" lc_id="n2nFYPBVOv">
                      <div class="grid-content bg-purple" lc_id="oZwq90Bi+e"></div>
                  </el-col>
                  <el-col :span="4" lc_id="5+xwb7Y6SI">
                      <div class="grid-content bg-purple-light" lc_id="bh/aoF+9ya"></div>
                  </el-col>
              </el-row>
          </div>
          <div lc_id="TYy/bOUMNr">
              <div class="demonstration-element" lc_id="trBMz5blKg">Layout 分栏间隔布局</div>
              <el-row :gutter="20" lc-mark lc_id="gFfya4TxDk">
                  <el-col :span="6" lc_id="ws0L3MK/Zd">
                      <div class="grid-content bg-purple" lc_id="Ubsbv5h8rG"></div>
                  </el-col>
                  <el-col :span="6" lc_id="JSzu5D9Sfk">
                      <div class="grid-content bg-purple" lc_id="O0Rgdk3cKz"></div>
                  </el-col>
                  <el-col :span="6" lc_id="QEAC8l6awc">
                      <div class="grid-content bg-purple" lc_id="N+YhMdOQVb"></div>
                  </el-col>
                  <el-col :span="6" lc_id="ojGD7eUbaa">
                      <div class="grid-content bg-purple" lc_id="cMouTO1yO7"></div>
                  </el-col>
              </el-row>
          </div>
          <div lc_id="xbQPgKUBIy">
              <div class="demonstration-element" lc_id="Bc2PY/ZYiU">Layout 混合布局</div>
              <el-row :gutter="20" lc-mark lc_id="nYMpGdRSrq">
                  <el-col :span="16" lc_id="eMrh2sYnKx">
                      <div class="grid-content bg-purple" lc_id="IC5Wm1Hn9n"></div>
                  </el-col>
                  <el-col :span="8" lc_id="Xs8VJkHelZ">
                      <div class="grid-content bg-purple" lc_id="ypg8TKxYh5"></div>
                  </el-col>
              </el-row>
              <el-row :gutter="20" lc-mark lc_id="Gm4zSQrKoN">
                  <el-col :span="8" lc_id="HBbcLaIE9m">
                      <div class="grid-content bg-purple" lc_id="BGPEKw0h4I"></div>
                  </el-col>
                  <el-col :span="8" lc_id="pK9Tw20FRI">
                      <div class="grid-content bg-purple" lc_id="ARxfz9lR3l"></div>
                  </el-col>
                  <el-col :span="4" lc_id="dRZMyvJPRM">
                      <div class="grid-content bg-purple" lc_id="XIKrToEQJd"></div>
                  </el-col>
                  <el-col :span="4" lc_id="0pIE7zGZUg">
                      <div class="grid-content bg-purple" lc_id="rW6P8kYrWR"></div>
                  </el-col>
              </el-row>
              <el-row :gutter="20" lc-mark lc_id="jgi7BKYF+0">
                  <el-col :span="4" lc_id="EZF3aOWMra">
                      <div class="grid-content bg-purple" lc_id="2HeQgzYeYn"></div>
                  </el-col>
                  <el-col :span="16" lc_id="2AVcBud9PA">
                      <div class="grid-content bg-purple" lc_id="6XvbIskPHD"></div>
                  </el-col>
                  <el-col :span="4" lc_id="y4UEbmjim5">
                      <div class="grid-content bg-purple" lc_id="m4yavM6CB5"></div>
                  </el-col>
              </el-row>
          </div>
      </div>
  </template>
  <script>
export default {
  data() {
    return {};
  },
  methods: {},
};  </script>
  <style scoped>.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6 !important;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}</style>
